import styled from 'styled-components';
import logoPic from '../../statics/logo.png'

export const HeaderWrapper = styled.div`
position:relative;
height:56px;
border-bottom:1px solid #f0f0f0;
z-index:1;
`;
export const Logo = styled.div`
position:absolute;
top:0;
left:200px;
width:100px;
height:56px;
background-image:url(${logoPic});
background-size:contain;
`;

export const Nav = styled.div`
width:960px;
height:100%;
margin:0 auto;
`;
export const NavItem = styled.div`
&.left {
    float:left;
}
&.right {
    float:right;
    color:#959595;
}
&.active {
    color:#ea6f5a
}
line-height:56px;
padding:0 15px;
font-size:17px;
color:#333;
`;
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})`
width:160px;
height:38px;
outline:none;
border:none;
border-radius:19px;
margin-top:9px;
padding:0 30px 0 20px;
box-sizing:border-box;
background-color:#eee;
font-size:14px;
margin-left:20px;
color:#666;
transiton:all 1s ease 0s;
&::placeholder {
    color:#999;
}
&.focused {
    width:240px;
}
&.slide-enter {
    width:160px;
}
&.slide-enter-active {
    transition:all .2s ease 0s;
    width:240px;
}
&.slide-exit {
    width:240px;
}
&.slide-exit-active {
    width:160px;
    transition:all .2s ease 0s;
}
`;
export const Addition = styled.div`
position:absolute;
right:200px;
top:0;
height:56px;
`;

export const Btn = styled.div`
float:right;
line-height:38px;
border-radius:19px;
margin-top:9px;
border:1px solid #ec6149;
margin-right:20px;
padding:0 20px;
font-size:14px;
&.reg {
    color:#ec6149;
}
&.wri {
    color:#fff;
    background-color:#ec6149;
}
`;
export const SearchWrapper = styled.div`
float:left;
position:relative;
.zoom {
    position:absolute;
    right:5px;
    bottom:5px;
    width:30px;
    height:30px;
    border-radius:50%;
    line-height:30px;
    text-align:center;
    font-size:18px;
    &.focused {
        background-color:#777;
        color:#fff;
    }
}
`;

export const SearchInfo=styled.div`
position:absolute;
left:0;
top:56px;
width:240px;
padding:0 20px;
box-shadow:0 0 8px rgba(0,0,0,.2);
background-color:#fff;
`;

export const SearchInfoTitle=styled.div`
margin-top:20px;
margin-bottom:15px;
line-height:20px;
font-size:14px;
color:#969696;
`;

export const SearchInfoSwitch=styled.span`
float:right;
font-size:13px;
.spin {
    font-size:12px;
    margin-right:2px;
    float:left;
    transition:all .2s ease;
    transform-origin:center center;
}
`;

export const SearchInfoItem=styled.a`
font-size:12px;
padding:0 5px;
line-height:20px;
border:1px solid #ddd;
color:#787878;
border-radius:3px;
float:left;
margin-right:10px;
margin-bottom:10px;
`;

export const SearchInoList=styled.div`
overflow:hidden;
`